<script lang="ts" setup>
import { FormInstance, FormRules } from 'element-plus'
import { addUserApi, updateUserApi } from '/@/api/auth/account'
import { getAllRoleListApi } from '/@/api/auth/role'
import { CreateEditDialog, EditDialogType } from '/@/components/QsEditDialog'
import { QsSelect } from '/@/components/QsSelect'
import { baseMessage } from '/@/utils/message'

const formRef = ref<FormInstance>()
const updateId = ref<number>()
const parentTitle = ref<string>()
const emit = defineEmits(['refresh'])
const form = ref<
  Partial<
    defs.common.CreateUserRequest & {
      username: string
      patency_password: string
    }
  >
>({
  username: '',
  patency_password: '',
  displayName: '',
  deptId: undefined,
  mobile: '',
  avatar: '',
  roleId: undefined,
  isSuper: false,
  isEnabled: true,
})
const confirm = async (type: EditDialogType) => {
  await formRef.value?.validate().then(async () => {
    if (type == EditDialogType.ADD || type == EditDialogType.SUBLEVEL) {
      const { result } = await addUserApi(form.value)
      if (result) {
        baseMessage('添加成功')
      }
    } else {
      if (!updateId.value) return
      const { result } = await updateUserApi(updateId.value, form.value)
      if (result[0]) {
        baseMessage('修改成功')
      }
    }
  })
}

const { open, Dialog } = new CreateEditDialog<defs.common.User>({
  title: '用户',
  confirm: confirm,
  closeCallback: () => {
    formRef.value?.resetFields()
    parentTitle.value = undefined
  },
  openCallBack: ({ data }) => {
    if (data) {
      updateId.value = data.id
      form.value = data
    }
  },
  refresh: () => emit('refresh'),
})
export type ShowEditDialog = typeof open

const rules: FormRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  patency_password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  displayName: [{ required: true, message: '请输入显示名', trigger: 'blur' }],
  roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
  mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  avatar: [{ required: true, message: '请选择头像', trigger: 'blur' }],
}
defineExpose({
  open,
})

const roleList = ref<defs.common.Role[]>([])
const getRoleList = async () => {
  const { result } = await getAllRoleListApi()
  roleList.value = result
}
onBeforeMount(() => {
  getRoleList()
})

onBeforeMount(() => {})
</script>

<template>
  <Dialog>
    <el-form ref="formRef" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="patency_password">
        <el-input v-model="form.patency_password" placeholder="请输入密码" type="password" />
      </el-form-item>
      <el-form-item label="显示名" prop="displayName">
        <el-input v-model="form.displayName" placeholder="请输入显示名" />
      </el-form-item>
      <el-form-item label="角色" prop="roleId">
        <QsSelect v-model="form.roleId" class="w-full" label-key="name" :options="roleList" value-key="id" />
      </el-form-item>
      <el-form-item label="超级管理员" prop="isSuper">
        <el-switch v-model="form.isSuper" />
      </el-form-item>
      <el-form-item label="是否启用" prop="isEnabled">
        <el-switch v-model="form.isEnabled" />
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<style lang="scss" scoped></style>
